<template>
  <div>
    <Header></Header>
    <h2>记账管理--个人信息</h2>
    <!--<button @click="getBills()">查询</button>-->
    <div>
      <el-table
          :data="tableData"
          style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="金额">
                <span>{{ props.row.money }}</span>
              </el-form-item>
              <el-form-item label="分类">
                <span>{{ props.row.catename }}</span>
              </el-form-item>
              <el-form-item label="账户">
                <span>{{ props.row.accountname }}</span>
              </el-form-item>
              <el-form-item label="时间">
                <span>{{ props.row.time }}</span>
              </el-form-item>
              <el-form-item label="备注">
                <span>{{ props.row.remark }}</span>
              </el-form-item>
              <el-form-item label="账本">
                <span>{{ props.row.bookname }}</span>
              </el-form-item>
              <el-form-item label="类型">
                <span>{{ props.row.type }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            label="时间"
            prop="time">
        </el-table-column>
        <el-table-column
            label="金额"
            prop="money">
        </el-table-column>
        <el-table-column
            label="分类"
            prop="catename">
        </el-table-column>
        <el-table-column
            label="备注"
            prop="remark">
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header";

export default {
  name: "Index",
  components: {Header},
  created() {
    this.getBills()
  },
  methods: {
    getBills() {
      // alert(1)
      this.$axios.get("/bill").then(res => {
        this.tableData = res.data
        // console.log(res.data)
        // console.log(this.tableData)
      })
    }
  },
  data() {
    return {
      tableData: [{
        accountname: "支付宝",
        bookname: "日常账本",
        catename: "咖啡",
        id: 3,
        money: 26.5,
        remark: "在星巴克购买咖啡",
        time: "2021-07-04T11:03:17",
        type: 1
      }]
    }
  }
}

</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>